<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3-表单选择器</title>
    <style>
        input[type="text"] {
            background-color: #9cf;
        }

        input[type="text"]:focus {
            background: #9cf;
        }

        input[type*="check"] {
            height: 32px;
        }

        input[type*="text"] {
            height: 32px;
        }

        input[type="text"]:enabled {
            background-color: #369;
        }

        input[type="text"]:disabled {
            background-color: #963;
        }
    </style>
</head>

<body>
    <form action="">
        <div><label for="">UserName:<input type="text" required></label></div>
        <div><label for="">E-mail:<input type="text" pattern="^\d{6}$"></label></div>
        <div>
            Gender:
            <label for=""><input type="radio" name="gender" checked>Male</label>
            <label for=""><input type="radio" name="gender">Female</label>
        </div>
        <div>
            Hobby:
            <label for=""><input type="checkbox" style="border:6px red solid" /></label>
            <label for=""><input type="checkbox" checked /></label>
            <label for=""><input type="checkbox" /></label>
        </div>
        <div>
            <button type="submit">submit</button>
            <button type="reset">reset</button>
            <button type="button">button</button>
        </div>
    </form>

    <!-- 
        1.所有单行文本框背景颜色改成#9cf
        2.所有单行文本框获取焦点时背景色改成#9cf
        3.所有选中的单选项和复选项的宽度高设置为32px
        4.设置文本框有效时的背景为#369
        5.设置文本框无效时的背景为#963
     -->
</body>

</html>